
import { Link, useNavigate } from 'react-router-dom';
import { Button, List } from 'antd';
import { useEffect, useState } from 'react';
import { getList, addData } from '@/store/modules/comment';
import { useDispatch, useSelector, } from "react-redux"
import { Input } from 'antd';
const Home = () => {
    const dispatch = useDispatch();

    const [iptValue, setIptValue] = useState("")
    const { list } = useSelector(value => value.comment)
    const addComment = () => {
        console.log(iptValue);
        const obj = {
            rpid:Math.ceil(Math.random() * 1000),
            user: {
                uname: '匿名用户',
                ctime: new Date().toLocaleString(),
                content: iptValue
            }
        }
        dispatch(addData(obj));
        setIptValue("")
    }
    useEffect(() => {
        dispatch(getList())
    }, [dispatch])
    return (
        <div>
            <div className='mb-4'>
                练习：react toolkit、react-redux、useEffect、mockjs、antd
            </div>
            <div className='flex w-2/4'>
                <Input placeholder='请输入...' value={iptValue} onChange={(e) => { setIptValue(e.target.value) }}></Input>
                <Button onClick={addComment} type="primary">添加评论</Button>
            </div>
            <div className='w-2/4'>
            <List
                itemLayout="horizontal"
                dataSource={list}
                renderItem={(item, index) => (
                  <div>
                    <List.Item>
                        <List.Item.Meta
                            title={<div className='flex justify-between'><span>-{item.user.uname || '匿名用户'}-</span><span>{item.user.ctime || ''}</span></div>}
                            description={item.user.content}
                        />
                    </List.Item>
                  </div>
                )}
            />
            </div>
            
        </div>
    )
}
export default Home;